<template>
  <div class="app-container-item">
    <div class="form-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" class="form-flex">
        <el-row :gutter="20">
          <!--<el-col :span="8" :xs="24">-->
            <!--<el-form-item label="小区编号" prop="communityNum">-->
              <!--<el-input v-model="form.communityNum" placeholder="请输入小区编号"/>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :span="8" :xs="24">
            <el-form-item label="小区名称" prop="communityName">
              <el-input v-model="form.communityName" placeholder="请输入小区名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="小区电话" prop="phoneNum">
              <el-input v-model="form.phoneNum" placeholder="请输入小区电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="小区面积" prop="communityArea">
              <el-input-number v-model="form.communityArea" controls-position="right" :precision="2"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="小区负责人" prop="butlerUserName">
              <el-input v-model="form.butlerUserName" readonly placeholder="请选择小区负责人" >
                <el-button slot="append" icon="el-icon-search" @click="()=>this.$refs.userRefs.show()"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="小区城市" prop="cityCode">
              <el-cascader
                v-model="selectedAddress"
                ref="myCascader"
                placeholder="试试搜索：河南"
                :options="options"
                @change="changeSelect"
                filterable>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="住户数量" prop="roomCountNum">
              <el-input v-model="form.roomCountNum"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="入住数量" prop="roomYrzNum">
              <el-input v-model="form.roomYrzNum" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="未入住数量" prop="roomWrzNum">
              <el-input v-model="form.roomWrzNum" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24">
            <el-form-item label="小区地址" prop="address">
              <el-input v-model="form.address" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24">
            <el-form-item label="缩略图">
              <ImageUpload v-model="form.imagePath"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dialog-footer" style="text-align: center;">
      <el-button type="primary" plain @click="submitForm" v-hasPermi="['property:community:edit']">保 存</el-button>
    </div>

    <select-user ref="userRefs" @ok="selectUserOk" />
  </div>
</template>

<script>
  import {getCommunity, updateCommunity} from "@/api/property/community"
  import {listDept} from "@/api/system/dept"
  import {treeData} from "@/api/system/category"
  import SelectUser from "@/views/components/magnifier/selectUser"
  import { censusRoomInfo } from "@/api/property/room";

  export default {
    name: "CommunityForm",
    components:{ SelectUser },
    data() {
      return {
        //选中地址
        selectedAddress: [],
        //行政区域字典
        options: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          communityNum: [
            {required: true, message: "小区编号不能为空", trigger: "blur"},
          ],
          communityName: [
            {required: true, message: "小区名称不能为空", trigger: "blur"},
          ],
          deptId: [
            {required: true, message: "物业单位不能为空", trigger: "blur"},
          ],
        }
      };
    },
    watch: {
      currentNode(v) {
        this.initForm()
      }
    },
    created() {
      this.getCategoryList();
      this.initForm()
    },
    methods: {
      initForm() {
        this.reset();
        if (this.currentNode.modelType == 'community') {
          getCommunity(this.currentNode.id).then(response => {
            this.form = Object.assign(response.data,{roomCountNum:0,roomWrzNum:0,roomYrzNum:0})
            censusRoomInfo({communityId: this.currentNode.id}).then(res=>{
              this.form.roomCountNum = res.data.roomCountNum
              this.form.roomWrzNum = res.data.roomWrzNum
              this.form.roomYrzNum = res.data.roomYrzNum
            })
            if (this.form.cityCode && this.form.cityCode.length > 0) {
              this.selectedAddress = this.form.cityCode.split(',');
            }
          });
        }
      },
      /** 查询分类字典列表 */
      getCategoryList() {
        treeData({}, '10001').then(response => {
          this.options = response.data;
          this.deleteLastNode(this.options);
        });
      },
      deleteLastNode(rows) {
        for (var i in rows) {
          let row = rows[i];
          if (row.children.length > 0) {
            this.deleteLastNode(row.children);
          } else {
            delete row['children'];
          }
        }
      },
      changeSelect(node){
        let nodes = this.getCascaderObj(node,this.options);
        this.form.cityName = this.jointSrc(nodes,'label',"/");
        this.form.cityCode = this.jointSrc(nodes,'value',",");
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          deptId: null,
          communityNum: null,
          communityName: null,
          address: null,
          cityName: null,
          cityCode: null,
          communityArea: null,
          ancestors: null,
          latitude: null,
          longitude: null,
          position: null,
          dataSourceId: null,
          state: null,
          statusCd: "0",
          remark: null,
          phoneNum:null,
          imagePath:null,
          butlerUserId:null,
          butlerUserName:null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateCommunity(this.form).then(response => {
              this.msgSuccess("修改小区资料成功");
            });
          }
        });
      },
      selectUserOk(selection){
        if(selection.length > 0){
          this.form.butlerUserName = selection[0].nickName
          this.form.butlerUserId = selection[0].userId
        }else{
          this.form.butlerUserName = null
          this.form.butlerUserId = null
        }
      }
    },
    props: {
      currentNode: {
        type: Object,
        default: () => {
        }
      },
    }
  };
</script>
